import React from 'react'
import { error, InputList, Modal, success, info, Link, Table, TitleBar } from '../../ui-components'
import { connect } from 'react-redux'
import moment from 'moment'
import util from '../../util'
import { map as tableMap } from '../../ui-components/table'
import { u } from '../../actions/util'

export default
@connect(({ app, transfer }) => ({ app, transfer }))
class Transfer extends React.Component {

  state = {
    create: false
  }

  selectedUser = null

  create() {
    if (util.isNull(this.selectedUser)) return error('请选择员工')
    this.props.router.push(`/hr/reorg/transfer/${this.selectedUser.userId}`)
  }

  handleSelectCreateUser(user) {
    this.selectedUser = user
  }

  pageSize=30
  pageNumber=1

  fetchTransforms() {
    info('读取中...', true)
    const pageNumber = this.props.location.query.pageNumber || this.pageNumber
    this.props.fetchTransformList({
      pageNumber,
      pageSize: this.pageSize
    }, () => {
      info()
    })
  }

  handlePageChage(_pageNumber) {
    const { pageNumber, ...others } = this.props.location.query
    this.props.router.push(`/hr/reorg/transfer?pageNumber=${_pageNumber}&${util.body(others)}`)
  }

  componentDidMount() {
    this.fetchTransforms()
  }

  requestCreateTransfer() {
    util.dialog.call(this, 'create')
  }

  cancelCreate() {
    util.dialog.call(this, 'create')
    this.selectedUser = null
  }

  render() {
    const { list } = this.props.transfer
    const { totalNumber, jobTransferResponseVOs } = list
    const tableConfig = {
      pagin: typeof totalNumber === 'number' && {
        pageSize: this.pageSize,
        pageNumber: this.props.location.query.pageNumber || this.pageNumber,
        totalNumber,
        onChange: ::this.handlePageChage,
        fetch: ::this.fetchTransforms
      },
      data: jobTransferResponseVOs,
      model: {
        fullName: '调岗对象',
        jobTitle: '职位',
        createdTime: '发起时间',
        transferDate: '调岗时间',
        transferType: '类型',
        others: ''
      },
      config: {},
      map: {
        fullName: (_, item) => {
          if (item.userSimpleUserProfileVO) {
            return tableMap.fullName.call(null, item.userSimpleUserProfileVO.fullName, item.userSimpleUserProfileVO)
          } else {
            return tableMap.fullName(null, null)
          }
        },
        jobTitle: (_, item) => item.afterJobTitleOrgPickOptionVO ? item.afterJobTitleOrgPickOptionVO.optionValue : '',
        createdTime: v => moment(+v).format('YYYY.MM.DD'),
        transferDate: v => moment(+v).format('YYYY.MM.DD'),
        others: (_, item) => <div data-role="table-hover"><Link label="查看" to={`#/hr/reorg/transfer-detail/${item.jobTransferId}`}/></div>
      }
    }
    return (
      <div>
        <TitleBar
          label="调岗列表"
          actions={[
            {
              label: '发起新调岗',
              handler: ::this.requestCreateTransfer
            }
          ]}
        />
        <Table
          {...tableConfig}
        />
        <Modal
          active={this.state.create}
          onRequestClose={::this.cancelCreate}
          actions={[
            'cancel',
            ::this.create
          ]}
          title="发起新调岗"
        >
          <div style={{width: '400px'}}>
            <InputList
              autoFocus
              width={264}
              label="员工姓名"
              fetch={this.props.fetchAtList}
              clear={this.props.clearAtList}
              onSelect={::this.handleSelectCreateUser}
              list={this.props.app.atList}
              excludeList={[{userId: u.userId}]}
            />
          </div>
        </Modal>
      </div>
    )
  }
}
